<template>
  <!-- 页面列表 -->
  <div class="pageList">
    <!-- 搜索 -->
    <SearchForm ref="searchFrom" :queryData="queryData" :queryItem="queryItem" :queryHandle="queryHandle"></SearchForm>
    <!-- table -->
    <div class="table">
      <!-- 表格 -->
      <TableList :tableData="tableData" :tableConfig="tableConfig" @handleRowSelect="handleRowSelect"
        @freshTableData="initQueryData">
      </TableList>
    </div>
  </div>
</template>

<script>
import SearchForm from '@/commont/plugins/searchForm.vue'
import TableList from '@/commont/plugins/customTable.vue'
export default {
  name: "",
  components: { SearchForm, TableList },
  props: {},
  data() {
    let stateOption = [
      { label: '全部', value: "" },
      { label: '编辑中', value: 1 },
      { label: '审核通过', value: 3 },
      { label: '已发布', value: 5 },
      { label: '删除通过', value: 13 },
      { label: '已注销', value: 15 },
    ]
    return {
      computedHeight: 0, // 用于计算相关组件高度
      // 搜索
      queryData: {//刷选条件
        status: '',
        name: '',
        city: '',
        date: '',
        address: '',
        pageSize: 0,
        pageNum: 10
      },
      queryItem: [//筛选数据
        { type: 'Select', label: '状态', prop: 'status', options: stateOption },
        { type: 'Input', label: '姓名', prop: 'name' },
        { type: 'Input', label: '区域', prop: 'city' },
        // {type:'Date', label:'日期', prop:'date'}, //报错
        { type: 'Input', label: '住址', prop: 'address' },
      ],
      queryHandle: [//筛选按钮
        { label: '查询', type: 'primary', handle: this.initQueryData },
        {
          label: '重置', type: 'default', handle: param => {
            Object.assign(this.queryData, {
              status: '', name: '', city: '', date: '', address: '',
            })
          }
        }
      ],
      // 表格
      tableData: {
        columns: [
          { title: '序号', type: 'index', width: '65', align: 'center' },
          { title: '头像', type: 'img', prop: 'avatar', width: '130', align: 'center', click: this.showImg },
          { title: '姓名', prop: 'name', width: '110', align: 'center' },
          { title: '年龄', prop: 'age', width: '80', align: 'center', sortable: true },
          { title: '性别', prop: 'sex', width: '70', align: 'center', formatter: this.formatter },
          { title: '日期', prop: 'date', width: '180', align: 'center' },
          { title: '区域', prop: 'city', width: '150', align: 'center' },
          { title: '地址', prop: 'address', width: '', align: 'left' },
          { title: '是否更新', type: 'switch', prop: 'update', width: '120', align: 'center', click: this.updated },
          {
            title: '操作', type: 'btn', width: '150', align: 'center',
            btns: [
              { label: '编辑', click: this.handleEdit, visible: false },
              { label: '预览', click: this.handlePreview, visible: false },
              { label: '删除', click: this.handleDelete, visible: false },
            ],
          },
        ],
        mainBtn: {
          label: '创建页面',
          click: this.createdPage,
          visible: true
        },
        loading: false,
        data: [],
        total: 0,
        currentPage: 1,
        pageSize: 10,
        sizeOpts: [10, 20, 30, 40]
      },
      tableConfig: {
        typeName: 'single', //多选:multiple  单选:single  展开行:expand
        stripe: true,
        border: true,
        defaultSort: { prop: 'age', order: '' }
      },
      checkData: {}
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    // 动态设置子组件高度
    // this.computedHeight = this.$util.$resizeElementH(this.$refs.searchFrom);
    // let _this = this;
    // window.addEventListener('resize', function () {
    //   _this.computedHeight = _this.$util.$resizeElementH(_this.$refs.searchFrom);
    // });
    this.initQueryData();
  },
  updated() { },
  methods: {
    // 格式化
    formatter(row) {
      return row.sex == 1 ? '男' : '女';
    },
    // 创建页面
    createdPage() {
      this.$router.push('createPage');
    },
    // 查询(循环数据添加单选标记字段：isChecked=false)
    initQueryData(params) {
      this.tableData.data = [
        {
          id: '1',
          date: '2016-05-02 12:23:34',
          name: '王小虎',
          avatar: require("@/assets/img/1.jpg"),
          age: '21',
          sex: '1',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          seach: '',
          isChecked: false,
          update: 1,
        },
        {
          id: '2',
          date: '2016-05-04 12:23:34',
          name: '王小虎',
          avatar: require("@/assets/img/1.jpg"),
          age: '24',
          sex: '2',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          seach: '',
          isChecked: false,
          update: 1,
        },
        {
          id: '3',
          date: '2016-05-01 12:23:34',
          name: '王小虎',
          avatar: require("@/assets/img/1.jpg"),
          age: '22',
          sex: '1',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          seach: '',
          isChecked: false,
          update: 0,
        },
        {
          id: '4',
          date: '2016-05-03 12:23:34',
          name: '王小虎',
          avatar: require("@/assets/img/1.jpg"),
          age: '29',
          sex: '1',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          seach: '',
          isChecked: false,
          update: 1,
        }
      ]
      this.tableData.total = this.tableData.data.length;
    },
    // 编辑
    handleEdit(idx, item) {
      console.log('编辑', item);
    },
    // 预览
    handlePreview(idx, item) {
      console.log('预览', item);
    },
    // 删除
    handleDelete(idx, item) {
      console.log('删除', item);
    },
    // 单选
    handleRowSelect(data) {
      console.log('单选', data);
      this.checkData = data;
      this.tableData.data.forEach(item => {
        if (data.id == item.id) {
          item.isChecked = true;
        } else {
          item.isChecked = false;
        }
      })
    },
    // 预览缩略图
    showImg(data) {
      console.log('缩略图', data);
    },
    // 更新
    updated(data) {
      console.log('更新', data);
    },
    // 输入
    getSeach(data) {
      console.log('输入', data);
    },

  },
  filters: {},
}
</script>

<style lang="less" scoped>
.pageList {
  width: 100%;
  height: 100%;

  .table {
    height: calc(100% - 100px);
  }
}
</style>